<template>
  <div>
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
      size="medium"
    >
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="设备ID" prop="code">
            <el-input v-model="ruleForm.code" disabled="" placeholder="请输入设备ID"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="设备名称" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入设备名称"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="类型" prop="type">
            <el-select
              v-model="ruleForm.type"
              clearable
              placeholder="请选择"
              filterable
              style="width: 100%;"
            >
              <el-option :key="1" label="灯" :value="1"></el-option>
              <el-option :key="2" label="报警器" :value="2"></el-option>
              <el-option :key="3" label="门传感器" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="form-footer">
      <el-button type="primary" class="sureBtn" size="medium" @click="save">
        提 交
      </el-button>
      <el-button type="info" class="setBtn" size="medium" @click="cancel">
        取 消
      </el-button>
    </div>
  </div>
</template>
<script>
  import { isPhone } from "@/utils/validate";
  import { getdevice } from "@/api/device";
  import { generateMixed } from "@/utils"
  export default {
    name: "DeviForm",
    components: {},
    props: {
      data: {
        type: Object,
        default() {
          return {
            code: "",
            name: "",
            type: "",
          };
        },
      },
    },
    data() {
      return {
        ruleForm: {
          code: generateMixed(5),
          name: "",
          type: "",
        },
        rules: {
          code: [{ required: true, message: "请输入设备ID", trigger: "blur" }],
          name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
          type: [{ required: true, message: "请选择类型", trigger: "change" }],
        },
        dataPickerBeforeTodayOptions: {
          disabledDate(time) {},
        },
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      console.log(JSON.stringify(this.data));
      if (JSON.stringify(this.data) !== "{}") {
        this.ruleForm = this.data;
      }
    },
    methods: {
      save() {
        this.$refs["ruleForm"].validate(async (valid) => {
          if (valid) {
            if (this.ruleForm.id) {
              getdevice("put", this.ruleForm).then((resp) => {
                if (resp.code === 200) {
                  this.$emit("save", this.ruleForm);
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                }
              });
            } else {
              getdevice("post", this.ruleForm).then((resp) => {
                if (resp.code === 200) {
                  this.$emit("save", this.ruleForm);
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                }
              });
            }
          }
        });
      },
      cancel() {
        this.$refs["ruleForm"].resetFields();
        this.$emit("cancel", this.ruleForm);
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleChange(value) {
        console.log(value);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .el-tabs {
    ::v-deep {
      .el-tabs__header {
        margin-bottom: 24px;
      }
    }
  }

  .el-form-item {
    margin-bottom: 24px;
  }

  .selectClass {
    width: 100%;
  }

  .form-footer {
    padding-left: 100px;
  }

  .diver-title {
    margin-bottom: 24px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }

  .tips {
    padding-left: 100px;
    margin-bottom: 24px;
    font-size: 16px;
    color: #ff4d50;
  }
</style>
